<template>
  <!-- 用户头像区域 -->
  <div class="top">
    <van-image
        round
        width="10rem"
        height="10rem"
        fit="cover"
        position="center"
        src="https://img1.baidu.com/it/u=1968668429,2104382916&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500"
    />
  </div>
  <!-- 使用列表显示用户信息 -->
  <van-cell-group>
    <van-cell title="用户名" value="米饭好好吃" />
    <van-cell title="角色" value="站长" />
    <van-cell title="年级" value="大三" />
    <van-field
        v-model="authorProfile"
        rows="1"
        autosize
        label="作者简介"
        type="textarea"
    />
    <van-cell>
      <div class="pay-btn">
        <van-button
            round
            type="success"
            icon="gold-coin-o"
            block="true"
            @click="doPay"
        >
          打赏作者
        </van-button>
      </div>
    </van-cell>

  </van-cell-group>
</template>

<script setup lang="ts">

// 定义作者简介内容

import request from "../request/request";

const authorProfile = '希望成为一名全栈工程师！';

// 打赏作者
const doPay = async () => {
  window.open('http://49.235.188.164:5000/api/alipay/pay');
}
</script>

<style scoped>
.top {
  display: flex;
  justify-content: center;   /* 水平居中 */
}
</style>